<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>邮件管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/>

</head>
<body>

    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h2>简单邮件发送</h2>
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form" style="padding:20px" >
                            <div class="layui-form-item">
                                <label class="layui-form-label">收件人：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="toUsername" placeholder="请输入收件人姓名" autocomplete="off"
                                           class="layui-input" lay-verify="required|email">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">主题：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="subject" placeholder="主题" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">内容：</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" class="layui-textarea" name="content"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="simpleEmailForm">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h2>带有附件的邮件发送</h2>
                    </div>
                    <div class="layui-card-body">
                            <form class="layui-form" style="padding:20px" >
                                <div class="layui-form-item">
                                    <label class="layui-form-label">收件人：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="toUsername" placeholder="请输入收件人姓名" autocomplete="off"
                                               class="layui-input" lay-verify="required|email">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">主题：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="subject" placeholder="主题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">上传图片：</label>
                                    <div class="layui-input-block">
                                        <div class="layui-upload">
                                            <button type="button" class="layui-btn" id="uploadPic">多图片上传</button>
                                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;" >
                                                预览图：
                                                <div class="layui-upload-list" id="previewPic"></div>
                                            </blockquote>
                                            <input type="type" name="filePath" id="filePath"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">内容：</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="请输入内容" class="layui-textarea" name="content"></textarea>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="emailForm">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                </div>
            </div>
        </div>
        <html th:include="website/footer"></html>
    </div>

    <script th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/main.js}" type="text/javascript" charset="utf-8"></script>

    <script>
        layui.use(['element','form','upload', 'layer'], function() {
            var $ = layui.jquery, form = layui.form, layer = layui.layer,
                upload = layui.upload;

            // 简单邮件发送
            form.on('submit(simpleEmailForm)', function(data){
                var url = "/v1/email/sendEmail";
                $.post(url,data.field,function (res) {
                    if (res.code === 0) {
                        layer.msg("发送成功！");
                    } else if (res.code === -1) {
                        layer.msg(res.msg);
                    } else {
                        layer.msg("发送失败！");
                    }
                },"json");
                return false;
            });

            // 带有附件的发送
            form.on('submit(emailForm)', function(data){
                var url = "/v1/email/sendAttachment";
                $.post(url,data.field,function (res) {
                    if (res.code === 0) {
                        layer.msg("发送成功！");
                    } else if (res.code === -1) {
                        layer.msg(res.msg);
                    } else {
                        layer.msg("发送失败！");
                    }
                },"json");
                return false;
            });

            upload.render({
                 elem: '#uploadPic'
                ,url:"/v1/file/upload"
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#previewPic').append('<img src="'+ result +'" width="100px" height="80px" alt="'+ file.name +'" class="layui-upload-img">')
                    });
                }
                ,done: function(res){
                    if (res.code === 0) {
                        layer.msg("上传成功！");
                        console.log(res)
                        $("#filePath").val(res.data);
                    } else if (res.code === -1) {
                        layer.msg(res.msg);
                    } else {
                        layer.msg("上传失败！");
                    }
                }
            });

        });
    </script>
</body>
</html>